<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="关键词：" prop="keyword">
          <el-input
            placeholder="借款人、身份证号"
            v-model="query.keyword"
            @input="$forceUpdate()"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品名称:" prop="productId">
          <el-select v-model="query.productId" placeholder="请选择" @change="$forceUpdate()">
            <el-option
              v-for="item in statusArray"
              :key="item.itemValue"
              :label="item.description"
              :value="item.itemValue"
            >
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="当前期数：" prop="currentStage">
          <el-input
            placeholder="请输入"
            v-model="query.currentStage"
            type="number"
            @input="$forceUpdate()"
          ></el-input>
        </el-form-item>
        <el-form-item label="结清状态:" prop="state">
          <el-select v-model="query.state" placeholder="请选择" @change="$forceUpdate()">
            <el-option
              label="已结清"
              value="1"
            >
            </el-option>
            <el-option
              label="未结清"
              value="0"
            >
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
          >清空
          </el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
          >搜索
          </el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="orderExport"
              v-no-more-click
            >导出
            </el-button
            >
            <el-button
              size="small"
              type="primary"
              @click="PersonnelDia=true"
              v-no-more-click
              v-if="query.execMonth"
            >添加
            </el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="del"
              v-no-more-click
              v-if="query.execMonth"
            >删除
            </el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      :row-key="getRowKey"
      @selection-change="changeFun"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="36"
        class-name="checkBox"
      />
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="80px"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="borrowerName"
        label="借款人"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="idCard"
        label="身份证号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="productName"
        label="产品名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="formalLetterDate"
        label="出正式函时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="loanMoney"
        label="担保金额 （万元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="totalStage"
        label="担保期限 （月/期）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="guaranteeFee"
        label="担保费应收 费用（元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="monthlyMoney"
        label="每期应缴费用 （元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="lastStageMoney"
        label="尾期应缴费用 （元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="currentStage"
        label="当前应缴期数 （第X期）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="currentMoney"
        label="本次应缴金额 （元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="completedAmount"
        label="已缴金额 （元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="state"
        label="是否结清"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <span>{{ row.state ? "已结清" : "未结清" }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="remark"
        label="备注"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center" v-if="query.execMonth">
        <template slot-scope="scope" v-if="scope.row.state==0">
          <el-button
            type="text"
            size="small"
            @click="detailsFun(scope.row)"
            style="color: #3B9DF8"
            v-no-more-click
          >编辑
          </el-button
          >

          <el-button
            type="text"
            size="small"
            @click="earlySettlement(scope.row)"
            style="color: #FB575E"
            v-no-more-click
          > 结清
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="担保费分期信息核对："
      :visible.sync="PersonnelDia"
      append-to-body
      width="50%"
      top="30px"
      @close="cancel"
    >
      <el-button type="primary" @click="manuallyEnter">{{ isManually ? "自动填充" : "手动输入" }}</el-button>
      <el-row>
        <el-form :inline="true" style="text-align: left" label-width="120px">
          <el-col :span="12" class="indexClass">
            <!--            <span class="indexBox">*</span>-->
            <el-form-item label="借款人姓名:">
              <el-input
                v-model="addForm.borrowerName"
                v-if="isManually"
                placeholder="请输入关键词"
              ></el-input>
              <el-select
                v-else
                v-model="addForm.borrowerName"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading"
                @change="selectUser"
              >
                <el-option
                  v-for="item in options"
                  :key="item.sid"
                  :label="item.borrowerName"
                  :value="item.sid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码:">
              <el-input
                v-model="addForm.idCard"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名称:">
              <el-select v-model="addForm.productId" placeholder="请选择">
                <el-option
                  v-for="item in statusArray"
                  :key="item.itemValue"
                  :label="item.description"
                  :value="item.itemValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出正式函时间:">
              <el-date-picker
                class="timeIndex"
                value-format="yyyy-MM-dd"
                v-model="addForm.formalLetterDate"
                type="date"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="担保金额:">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.loanMoney"
              ></el-input>
            </el-form-item>
            <span class="indexBox">万元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="担保期限:">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.totalStage"
              ></el-input>
            </el-form-item>
            <span class="indexBox">月/期</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="担保费应收费用:" label-width="120px">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.guaranteeFee"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="每期应缴费用:">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.monthlyMoney"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="尾期应缴费用:">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.lastStageMoney"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="当前应缴期数:">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.currentStage"
              ></el-input>
            </el-form-item>
            <span class="indexBox">期</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="本次应缴金额:">
              <el-input
                maxlength="9"
                type="number"
                v-model="addForm.currentMoney"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <!--          todo  以后可能用到-->
          <!--          <el-col :span="12" class="indexClass ">-->
          <!--            <el-form-item label="已缴金额:">-->
          <!--              <el-input-->
          <!--                maxlength="9"-->
          <!--                type="number"-->
          <!--                v-model="addForm.completedAmount"-->
          <!--                readonly-->
          <!--              ></el-input>-->
          <!--            </el-form-item>-->
          <!--            <span class="indexBox">元</span>-->
          <!--          </el-col>-->
          <el-col :span="24">
            <el-form-item label="备注:">
              <el-input
                type="textarea"
                v-model="addForm.remark"
                style="width: 500px;"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="dbfqForm">确 定</el-button>
      </span>

    </el-dialog>
    <el-dialog
      title="结清总费用:"
      :visible.sync="dialogVisible"
      append-to-body
      width="50%"
      top="30px"
      @close="shut"
    >
      <el-row>
        <el-form :inline="true" style="text-align: left" label-width="100px">
          <el-col :span="12" class="indexClass ">
            <el-form-item label="担保费费用:">
              <el-input
                maxlength="9"
                type="number"
                v-model="form.settleMoney"
                placeholder="请输入担保费费用"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass ">
            <el-form-item label="风险备付金:">
              <el-input
                maxlength="9"
                type="number"
                v-model="form.riskAmount"
                placeholder="请输入风险备付金"
              ></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="结清时间:">
              <el-date-picker
                class="timeIndex"
                value-format="yyyy-MM-dd"
                v-model="form.settleTime"
                type="date"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shut">取 消</el-button>
        <el-button type="primary" @click="uplodForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPermType,
  querySignUpList,
  insertGuarantee,
  batchDeleteGuarantee,
  updateGuarantee,
  totalStaging,
  findByExecMonth,
  settle
} from "../../../src/assets/js/api";
import { expotOut } from "../../assets/js/utlis";
import { checkPermiss } from "../../assets/js/utlis";

export default {
  name: "paymentInstallment",
  data() {
    return {
      dialogVisible: false,
      query: {
        pageSize: 10,
        pageNum: 1,
        keyWord: null,
        execMonth: "",
        state: ""
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      PersonnelDia: false,
      ids: [],
      fileParmas: {},
      form: {
        settleMoney: "",
        riskAmount: "",
        settleTime: ""
      },
      addForm: {}, //添加数据data
      statusArray: [],
      golbalPermissions: [],
      options: [],
      loading: false,
      isManually: false//是否收到输入
    };
  },
  created() {
    this.query.execMonth = this.$route.query.execMonth || "";
    this.getList();
    this.getProductsData();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    userInfoExport: function() {
      return checkPermiss("business:sign:exportPerson", this.golbalPermissions);
    }
  },
  methods: {
    //删除
    del() {
      // console.log(this.ids);
      if (this.ids.length) {
        this.$confirm("此操作将删除当前选择数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          batchDeleteGuarantee({
            idList: this.ids
          }).then(() => {
            this.getList();
            this.$message.success("操作成功");
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

      } else {
        this.$message.error("请选择...");
      }
    },

    //添加数据提交更新或者编辑
    dbfqForm() {
      console.log(this.addForm);
      if (this.addForm.id) {
        //编辑
        updateGuarantee(this.addForm).then(() => {
          this.$message.success("更新成功");
          this.cancel();
          this.getList();
        });
      } else {
        //跟新
        insertGuarantee(this.addForm).then(() => {
          this.$message.success("提交成功");
          this.cancel();
          this.getList();
        });
      }

    },
    //手动输入
    manuallyEnter() {
      this.isManually = !this.isManually;
      this.addForm = {};
    },
    //选择借款人
    selectUser(e) {
      let item = this.options.find(i => {
        if (i.sid === e) {
          return i;
        }

      });

      this.addForm = { ...item };
      // this.addForm.idCard = item.idCard;
      // this.addForm.productId = item.productId;
      // this.addForm.borrowerName = item.borrowerName;
      this.addForm.orderNum = item.orderNumber;

    },
    //热收缩
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        querySignUpList({
          name: query
        }).then(res => {
          this.loading = false;
          this.options = res.data;
          console.log(res);

        });

      }
    },
    //添加/编辑关闭弹层
    cancel() {
      this.PersonnelDia = false;
      this.addForm = {};
    },
    // 弹窗取消按钮!
    shut() {
      this.dialogVisible = false;
      this.form = {};
    },
    // 获取产品数组列表!
    getProductsData() {
      getPermType("order_product").then((res) => {
        this.statusArray = res.data.map(item => {
          item.itemValue = +item.itemValue;
          return item;
        });

      });
    },

    // 提前结清按钮!
    earlySettlement(data) {
      // this.form.id = data.id;
      // this.form.did = data.did;
      // this.form.execMonth = data.execMonth;
      // this.form.settleNum = data.currentStage;
      this.form.guaranteeId = data.id;

      this.dialogVisible = true;
    },
    // 提交按钮!
    uplodForm() {
      if (this.form.settleMoney == "") {
        this.$message.error("请输入担保费费用!");
        return;
      } else {
        settle(this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.message);
            this.dialogVisible = false;
            this.getList();
          } else {
            this.form = {};
            this.dialogVisible = false;
            this.$message.error(res.message);
          }
        });
      }
    },
    //   获取数据
    getList() {
      if (this.query.execMonth) {
        //查看单月
        findByExecMonth(this.query).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.records;
            this.currentPage = res.data.current;
            this.total = res.data.total;
            this.pages = res.data.pages;
          }
        });
      } else {
        //查看全部
        totalStaging(this.query).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.records;
            this.currentPage = res.data.current;
            this.total = res.data.total;
            this.pages = res.data.pages;
          }
        });


      }

    },
    // 编辑
    detailsFun(row) {
      this.PersonnelDia = true;
      this.addForm = { ...row };
      console.log(row);
    },

    // 查看分期
    viewStagingFun() {
    },
    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.query.currentStage = "";
      this.query.keyword = "";
      this.query.productId = "";
      this.query.state = "";
      this.getList();
    },

    // 搜索按钮
    queryFun() {
      this.query.pageNum = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNum = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    // 批量
    getRowKey(row) {
      return row.id;
    },
    changeFun(row) {
      if (this.query.execMonth) {
        this.ids = row.map((item) => item.id);

      } else {

        this.ids = row.map((item) => item.did);
      }

    },
    orderExport() {
      this.fileParmas = { ...this.query };
      // this.fileParmas.currentStage = this.query.currentStage;
      // this.fileParmas.productId = this.query.productId;
      // this.fileParmas.keyWord = this.query.keyWord;
      // this.fileParmas.execMonth = this.query.execMonth;
      this.fileParmas.ids = this.ids;
      if (this.query.execMonth) {
        //单月导出
        expotOut(
          "post",
          "/business/guaranteeStaging/exportGuaranteeList",
          this.fileParmas, // 导出请求参数
          "担保分期表" // 导出文件名字
        );
      } else {
        //所有人员
        expotOut(
          "post",
          "/business/guaranteeStaging/exportTotalStaging",
          this.fileParmas, // 导出请求参数
          "担保分期表" // 导出文件名字
        );
      }

    }
  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  width: 320px;
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}

::v-deep .btn .el-button {
  line-height: 0;
  width: 80px;
  height: 32px;
}

::v-deep .el-table th > .cell {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.box {
  position: relative;
  padding: 20px 20px 50px 20px;
  background: #fff;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

/deep/ .indexClass {
  position: relative;
}

.indexBox {
  position: absolute;
  top: 10px;
  right: 20%;
  /*font-size: 18px;*/
  /*color: red;*/
}

</style>
